<template>
  <w-modal ref="WModal" :title="model ? '修改' : '添加'" :success-func="successFunc">
    <template v-slot:default>
      <a-form-item label="名称">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.name : '' }]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="说明">
        <a-input
          v-decorator="['show', { initialValue: model ? model.show : '' }]"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="能力">
        <a-slider v-model="sliderNum" />
      </a-form-item>
    </template>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WModal, { ModalFormComType } from '@/components/global/modal/form'
import Skills from '@/models/skills'
import { Api, Admin } from '@/config/api'

@Component({
  name: 'ComAdminWebSkills',
  components: {
    WModal
  }
})
export default class ComAdminWebSkills extends Vue {
  model: Skills | null = null;
  sliderNum = 0;

  show (model?: Skills) {
    this.model = model || null
    this.sliderNum = model ? model.num : 0;
    (this.$refs.WModal as ModalFormComType).show()
  }

  async successFunc (values: any) {
    const p = {
      ...values,
      num: this.sliderNum
    }
    const url = this.model
      ? `${Admin.skills.update}${this.model._id}`
      : Admin.skills.create
    const method = this.model ? '$put' : '$post'
    await this.$wAxios[method](url, p)
    this.$emit('success')
  }
}
</script>

<style scoped>
</style>
